<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{ asset('vaeyo/layui/css/layui.css') }}"  media="all">
    <style type="text/css">
        .vaeyo-main-header{
            width:100%;
            height: 200px;
            background:#fff;
            opacity: .8;
        }
        .site-doc-bgcolor li{
            padding:3px 5px;
        }
        .layui-progress{
            margin: 18px 0;
        }
        .vaeyo-main-icon div{
            height:98px;
            line-height: 98px;
            text-align: center;
            margin: 3.5px 0px;
            background-color: #F2F2F2;
            border:3px solid #fff;
        }
        .vaeyo-main-icon .layui-icon{
            font-size: 28px;
        }
    </style>
</head>
<body>

<div style="padding: 10px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">轮播组件</div>
                <div class="layui-card-body">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div style="line-height: 200px;text-align: center;background-color: #009688;color: #fff">遇见 vaeyoAdmin</div>
                            <div style="line-height: 200px;text-align: center;background-color: #5FB878;color: #fff">遇见 vaeyoAdmin</div>
                            <div style="line-height: 200px;text-align: center;background-color: #1E9FFF;color: #fff">遇见 vaeyoAdmin</div>
                            <div style="line-height: 200px;text-align: center;background-color: #FFB800;color: #fff">遇见 vaeyoAdmin</div>
                            <div style="line-height: 200px;text-align: center;background-color: #FF5722;color: #fff">遇见 vaeyoAdmin</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">图标(支持打开新tab哦)</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space10 vaeyo-main-icon">
                        <div class="layui-col-md6">
                            <a href="javascript:;" vaeyo_tab vae-id="1001" vae-title="树形表格" vae-src="/view/complete/treeGrid.html">
                                <i class="layui-icon layui-icon-user"></i>
                            </a>
                        </div>
                        <div class="layui-col-md6">
                            <a href="javascript:;" vaeyo_tab vae-id="1002" vae-title="权限控制树" vae-src="/view/complete/authTree.html">
                                <i class="layui-icon layui-icon-component"></i>
                            </a>
                        </div>
                        <div class="layui-col-md4">
                            <a href="javascript:;" vaeyo_tab vae-id="1004" vae-title="数据表格" vae-src="/view/table.html"">
                            <i class="layui-icon layui-icon-edit"></i>
                            </a>
                        </div>
                        <div class="layui-col-md4">
                            <a href="javascript:;" vaeyo_tab vae-id="1005" vae-title="静态表格" vae-src="/view/table1.html">
                                <i class="layui-icon layui-icon-find-fill"></i>
                            </a>
                        </div>
                        <div class="layui-col-md4">
                            <a href="javascript:;" vaeyo_tab vae-id="1006" vae-title="表单展示" vae-src="/view/form.html">
                                <i class="layui-icon layui-icon-set-fill"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">了解vaeyoAdmin</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container" style="padding:3px 0">
                        <div><a class="layui-btn layui-btn-fluid " href="https://jq.qq.com/?_wv=1027&k=5bmwTll" target="_blank">官方交流群</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-danger" href="https://gitee.com/pengweimy/vaeyoAdmin" target="_blank">免费下载</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-normal" href="javascript:layer.tips('双擎版正在紧张开发中,请持续关注!','#two');" id="two">了解双擎版</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-warm" href="http://pengyichen.cn" target="_blank">作者博客</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">内置线性图</div>
                <div class="layui-card-body">
                    <div class="vaeyo-main-header" id="vaeyo-main-header"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内置进度条</div>
                <div class="layui-card-body">
                    <div class="layui-progress" lay-showPercent="true">
                        <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
                    </div>

                    <div class="layui-progress" lay-showPercent="yes">
                        <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
                    </div>

                    <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                    </div>

                    <div class="layui-progress layui-progress-big">
                        <div class="layui-progress-bar" lay-percent="20%"></div>
                    </div>

                    <div class="layui-progress layui-progress-big">
                        <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
                    </div>

                    <div class="layui-progress layui-progress-big" lay-showPercent="true">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内置的背景色CSS类</div>
                <div class="layui-card-body">
                    <ul class="site-doc-bgcolor">
                        <li class="layui-bg-red">
                            赤色：class="layui-bg-red"
                        </li>
                        <li class="layui-bg-orange">
                            橙色：class="layui-bg-orange"
                        </li>
                        <li class="layui-bg-green">
                            墨绿：class="layui-bg-green"
                        </li>
                        <li class="layui-bg-cyan">
                            藏青：class="layui-bg-cyan"
                        </li>
                        <li class="layui-bg-blue">
                            蓝色：class="layui-bg-blue"
                        </li>
                        <li class="layui-bg-black">
                            雅黑：class="layui-bg-black"
                        </li>
                        <li class="layui-bg-gray">
                            银灰：class="layui-bg-gray"
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="{{ asset('vaeyo/layui/layui.js') }}" charset="utf-8"></script>
<script>
    layui.config({
        base: '{{ asset('vaeyo') }}/module/'
    }).define(['carousel','echarts','layer','element'], function(exports){
        var $ = layui.jquery,layer = layui.layer,element = layui.element,carousel = layui.carousel;

        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: '200px'
            ,arrow: 'hover'
            //,anim: 'updown' //切换动画方式
        });

        var myChart = echarts.init(document.getElementById('vaeyo-main-header'));
        var pv = [];
        var uv = [];
        for (var i = 23; i >= 0; i--) {
            pv[i] = Math.floor(Math.random()*i*50);
            uv[i] = Math.floor(Math.random()*i*100);
        }
        var data = {
            "time":['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
            "pv":pv,
            "uv":uv
        }
        option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['','']
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['','']
            },
            grid: {
                top:'5%',
                left: '1%',
                right: '1%',
                bottom: '10%',
                containLabel: true
            },
            xAxis : [{
                type : 'category',
                boundaryGap : false,
                data: data.time
            }],
            yAxis : [{
                type : 'value'
            }],
            series : [{
                name:'UV',
                type:'line',
                smooth: true,
                itemStyle: {normal: {color:'#009688'}},
                lineStyle:{normal:{color:'#009688',width:1}},
                areaStyle: {normal:{color:'#009688'}},
                data: data.uv
            },{
                name:'PV',
                type:'line',
                smooth: true,
                itemStyle: {normal: {color:'#01AAED'}},
                lineStyle:{normal:{color:'#01AAED',width:1}},
                areaStyle: {normal:{color:'#01AAED'}},
                data: data.pv
            }]
        };
        myChart.setOption(option);

        exports('main', {});
    });
</script>

</body>
</html>